<template>
	<cl-dialog
		title="绑定人员"
		width="400px"
		:visible.sync="visible"
		:before-close="beforeClose"
		@close="close"
		:props="{
			appendToBody: true,
			closeOnClickModal: false
		}"
	>
		<el-form :model="form" :rules="rules" ref="form" label-position="top" :disabled="saving">
			<el-form-item label="绑定人所属部门" prop="dept_id">
				<cl-cascader
					clearable
					v-model="form.dept_id"
					:options="deptList"
					:props="{
						value: 'dept_id',
						label: 'dept_name',
						checkStrictly: true
					}"
					style="width: 100%"
					filterable
					@change="changeAppointDept"
				/>
			</el-form-item>
			<el-form-item label="绑定人员" prop="user_id">
				<cl-select
					v-model="form.user_id"
					filterable
					style="width: 100%"
					placeholder="请选择绑定人员"
					@change="getUserBindWechat"
				>
					<el-option
						v-for="(item, index) in userList"
						:key="index"
						:label="item.user_name"
						:value="item.user_id"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="同步解绑" prop="replace_id">
				<cl-select
					v-model="form.replace_id"
					filterable
					style="width: 100%"
					placeholder="请选择要被解绑的加微号"
				>
					<el-option
						v-for="(item, index) in userBindWechat"
						:key="index"
						:label="item.content"
						:value="item.id"
					/>
				</cl-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="close">关闭</el-button>
			<el-button type="primary" :loading="saving" @click="submit">确定</el-button>
		</template>
	</cl-dialog>
</template>
<script>
	import { delEmptyChildren } from "@/utils";
	import { last } from "cl-admin/utils";
	export default {
		data() {
			return {
				visible: false,
				saving: false,
				deptList: [],
				userList: [],
				form: {
					id: undefined, //id
					biz_id: "", //事业部
					dept_id: "",
					user_id: "",
					corpid: "",
					replace_id: "",
				},
				rules: {
					dept_id: [{ required: true, message: "请选择绑定人所属部门" }],
					user_id: [{ required: true, message: "请选择绑定人员" }]
				},
				userBindWechat: []
			};
		},
		methods: {
			async init() {
				const { biz_id } = this.form;
				return Promise.all([
					delEmptyChildren(
						(this.deptList = await this.$store.dispatch("common/getDept", {
							biz_id,
							needAll: false,
							needCascader: true
						}))
					),
					this.getUserList()
				]);
			},
			open(data = {}) {
				console.log(data, 'wechat-form-open')
				this.visible = true;
				this.form.id = data.id;
				this.form.biz_id = data.biz_id;
				this.form.corpid = data.corpid;

				this.init();
			},
			close() {
				this.visible = false;
			},
			beforeClose() {
				this.reset();
				// this.close();
			},
			//重置表单
			reset() {
				this.$refs.form.resetFields();
				this.$resetFields(this.form);
				this.form.id = undefined;
				this.form.biz_id = undefined;
			},
			submit() {
				this.$refs.form.validate(async (valid, errors) => {
					this.showFormErr(errors);
					if (!valid) return;
					this.saving = true;
					await this.$service.config.wechatBindUser(this.form).done(() => {
						this.saving = false;
					});
					this.close();
					this.reset()
					this.$message.success("绑定成功！");
					this.$emit("confirm");
				});
			},
			changeAppointDept() {
				this.form.user_id = "";
				this.getUserList();
			},
			//人员
			async getUserList() {
				const { biz_id, dept_id } = this.form;
				this.userList = [];
				if (!biz_id) return;
				const data = await this.$service.user.deptuserlists({
					biz_id,
					dept_id: last(dept_id)
				});
				this.userList = data;
			},
			async getUserBindWechat() {

				console.log('hahahah', 'getUserBindWechat')

				const userBindWechat = await this.$service.config.getUserBindWechat({
					corpid: this.form.corpid,
					user_id: this.form.user_id
				});

				if (userBindWechat) {
					this.userBindWechat = userBindWechat;
					this.form.replace_id = userBindWechat[0].id
				}
			}
		}
	};
</script>
